<!DOCTYPE html>
<html>
<head>
    <!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示:地图。-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>传智健康</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!--设置容器样式大小，使地图充满整个浏览器窗口-->
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #l-map{height:430px;width:95%;margin-left: 25px}
        #r-result{width:95%; font-size:14px;line-height:20px;margin-left: 25px}
    </style>

    <!--引用百度地图API文件-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tnr1aGlVhNA9EPrUXGxBX0GddyDoiA0T">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
</head>
<body class="hold-transition">
<div >
    <el-container>
        <el-header  class="main-header" style="height:110px;">
            <div class="content-header">
                <h1>首页<small>公司分布图</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>公司分布图</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="app-container">
                <div class="filter-container">
                    &nbsp; &nbsp;
                    <el-link target="success"><a href="map.html" >分布图</a></el-link>
                    &nbsp; &nbsp; &nbsp; &nbsp;
                    <el-link target="success"><a href="map_detail.html" >详细信息</a></el-link>
                </div>
            </div>
        </el-header>
        <el-main >

            <!--地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。-->
            <div id="l-map"></div>
            <div id="r-result">
                <!--<input type="button" value="批量反地址解析+商圈" onclick="bdGEO(0)" />-->
                <div id="result"></div>
            </div>

        </el-main>
    </el-container>

</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(118.80432599999995,32.0668791), 13);
    map.enableScrollWheelZoom(true);
    var index = 0;
    var myGeo = new BMap.Geocoder();
    new Vue({
        created(){
            axios.post("/map/getAddress.do").then((res)=>{
                if (res.data.flag){
                    var list=res.data.data;
                    var adds=[];
                    for (var i1 = 0; i1 <list.length; i1++) {
                        adds.push(new BMap.Point(list[i1].longitude,list[i1].latitude));
                    }
                    for(var i = 0; i<adds.length; i++){
                        var marker = new BMap.Marker(adds[i]);
                        map.addOverlay(marker);
                        marker.setLabel(new BMap.Label(list[i].address,{offset:new BMap.Size(20,-10)}));
                    }
                }
            })
        }
    })




</script>
</html>